<template>
	<view>
		<!-- 顶部banner -->
		<u-swiper :list="list1" indicatorMode="line" circular height="350"></u-swiper>

		<!-- 统计栏 -->
		<view class="stat-bar">
			<view class="stat-item">
				<text class="stat-num">23</text>
				<text class="stat-label">职位</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">17</text>
				<text class="stat-label" >简历</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">12</text>
				<text class="stat-label">企业</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">331</text>
				<text class="stat-label">访问</text>
			</view>
		</view>

		<!-- 推荐企业（仅用户端显示） -->
		<view v-if="userRole === 'user'" class="recommend-section">
		  <view class="section-title animate-title">推荐企业</view>
		  <scroll-view scroll-x class="recommend-scroll">
		    <view class="recommend-list">
		      <view class="company-card" v-for="(company, idx) in recommendCompany" :key="idx" @click="toCompany(company)">
		        <image :src="company.companyPic" class="company-logo" />
		        <view class="company-name animate-text">{{company.company}}</view>
		        <view class="company-desc animate-text">{{company.vacancyName}}</view>
		      </view>
		    </view>
		  </scroll-view>
		</view>

		<!-- 推荐简历（仅企业端显示） -->
		<view v-if="userRole === 'company'">
			<view class="section-title">推荐简历</view>
			<scroll-view scroll-x class="recommend-scroll">
				<view class="recommend-list">
					<view class="resume-card" v-for="(resume, idx) in recommendResume" :key="idx" @click="toResume(resume)">
						<u-avatar :src="resume.aviator" size="large" />
						<view class="resume-name">{{resume.name}} · {{resume.age}}岁</view>
						<view class="resume-job">{{resume.job}}</view>
						<view class="resume-desc">{{resume.desc}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 附近项目/职位推荐 -->
		<text class="nearby-title" v-if="userRole === 'user'">附近项目：</text>
		<view class="cards-container" v-if="userRole === 'user'">
			<uni-card margin="0" padding="0" :border="false" :is-shadow="false" class="map-card common-card">
				<view class="map-container">
					<image src="/static/map.jpg" mode="scaleToFill" class="map-image"></image>
				</view>
			</uni-card>
			<u-card :showHead="false" class="overlap-card common-card" :showFoot="false">
				<view slot="body" class="card-body-layout" @click="toDetail(suggestVancacy)">
					<u-row gutter="16">
						<u-col span="3">
							<view>
								<u-avatar mode="square" size="large" :src="suggestVancacy.companyPic"></u-avatar>
							</view>
						</u-col>
						<u-col span="9">
							<u-row class="row-gutter">
								<text class="title-text text-ellipsis">{{suggestVancacy.vacancyName}}</text>
							</u-row>
							<u-row>
								<text class="text-ellipsis">地址：{{suggestVancacy.address}}</text>
							</u-row>
						</u-col>
					</u-row>
				</view>
			</u-card>
		</view>
		<view class="vacancyList" v-if="userRole === 'user'">
			<u-card v-for="(vacancy, index) in vacancyList.slice(1)" :key="index" :showHead="false" :showFoot="false"
				:class="['common-card', index === 0 ? 'first-card' : '']" @click="toDetail(vacancy)">
				<view slot="body" class="card-body-layout">
					<u-row gutter="16">
						<u-col span="3">
							<view>
								<u-avatar mode="square" size="large" :src="vacancy.companyPic"></u-avatar>
							</view>
						</u-col>
						<u-col span="9">
							<u-row class="row-gutter">
								<text class="title-text text-ellipsis">{{vacancy.vacancyName}}</text>
							</u-row>
							<u-row>
								<text class="text-ellipsis">地址：{{vacancy.address}}</text>
							</u-row>
						</u-col>
					</u-row>
				</view>
			</u-card>
		</view>

		<u-divider color="#ababab" margin-bottom="20" bg-color="#f7f7f7">没有更多</u-divider>
		<view>.</view>
	</view>
</template>

<script>
	import {
		pageSearch,
		resumeList
	} from '../../utils/api/modules/vacancy';

	import {
		getCompanyList
	} from '../../utils/api/modules/company';

	import {
		getResumeList
	} from '../../utils/api/modules/user';

	import {
		getStats
	} from '../../utils/api/modules/common';

	export default {
		data() {
			return {
				list1: [
					"/static/swiper/banner1.jpg",
					"/static/swiper/banner2.jpg",
					"/static/swiper/banner3.jpg",
					"/static/swiper/banner4.jpg",
					"/static/swiper/banner5.jpg",
				],
				stat: {
					jobCount: 0,
					resumeCount: 0,
					companyCount: 0,
					// visitCount: 0 // 移除访问量统计
				},
				recommendCompany: [
					
				],
				recommendResume: [

				],
				suggestVancacy: {},
				vacancyList: [],
				userRole: 'user' // 默认值
			};
		},
		methods: {
			// 获取统计数据
			async fetchStats() {
				try {
					const res = await getStats(); // 假设getStats返回 { jobCount, resumeCount, companyCount }
					if (res.code === 200) {
						this.stat = res.data;
					}
				} catch (error) {
					console.error('获取统计数据失败：', error);
				}
			},
			// 获取推荐企业列表
			async fetchRecommendCompanies() {
				try {
					const res = await getCompanyList({ isRecommend: true, pageSize: 4 }); // 假设getCompanyList支持推荐参数和分页
					if (res.code == 200) {
						this.recommendCompany = res.data.records.splice(0,3);
					}
				} catch (error) {
					console.error('获取推荐企业失败：', error);
				}
			},
			// 获取推荐简历列表
			async fetchRecommendResumes() {
				 try {
					const res = await getResumeList({ isRecommend: true, pageSize: 3 }); // 假设getResumeList支持推荐参数和分页
					if (res.code === 200) {
						this.recommendResume = res.data.records.splice(0,3);
					}
				} catch (error) {
					console.error('获取推荐简历失败：', error);
				}
			},
			// 获取职位列表
			async fetchVacancyList(pageSize = 10, pageNum = 1) {
				try {
					const res = await pageSearch({ pageSize, pageNum });
					if (res.code === 200) {
						this.vacancyList = res.data.records;
						if (this.vacancyList.length > 0) {
							this.suggestVancacy = this.vacancyList[0]; // 第一个作为推荐职位
						} else {
							this.suggestVancacy = {}; // 没有职位时清空推荐职位
						}
					}
				} catch (error) {
					console.error('获取职位列表失败：', error);
				}
			},
			toDetail(vacancy) {
				uni.navigateTo({
					url: `/pages/vacancy/vacancy-detail?id=${vacancy.id}`
				});
			},
			toCompany(vacancy) {
				uni.navigateTo({ url: `/pages/vacancy/vacancy-detail?id=${vacancy.id}` })
			},
			toResume(resume) {
				uni.navigateTo({ url: `/pages/mine/personal?id=${resume.userId}` })
			}
		},
		onLoad() {
			if (!this.$store.getters.isLoggedIn) {
				uni.redirectTo({
					url: '/pages/login'
				});
			}
			// 获取用户角色
			const user = uni.getStorageSync('user');
			if (user && user.role) {
				this.userRole = user.role;
			}
			if(this.userRole == 'company'){
				resumeList().then(res=>{
					this.recommendResume = res.splice(0,3);
					this.recommendCompany
				})	
			}else{
				pageSearch({
					pageSize: 10,
					pageNum: 1
				}).then(res => {
					this.recommendCompany = res.data.records.splice(0,3)
				});
			}
			
			pageSearch({
				pageSize: 1,
				pageNum: 10
			}).then(res => {
				this.vacancyList = res.data.records;
				this.suggestVancacy = this.vacancyList[0];
			})
		}
	};
</script>

<style>
	/* 公共文本样式 */
	.text-ellipsis {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* 标题文本样式 */
	.title-text {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 附近项目标题样式 */
	.nearby-title {
		display: block;
		padding-left: 42rpx;
		padding-top: 36rpx;
		margin-bottom: 20rpx;
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	/* 卡片容器 */
	.cards-container {
		position: relative;
		margin: 0 20rpx;
	}

	/* 卡片公共样式 */
	.common-card {
		border-radius: 20px !important;
	}

	/* 地图卡片样式 */
	.map-card {
		padding: 0 !important;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}

	/* 地图容器 */
	.map-container {
		position: relative;
		width: 100%;
		height: 550rpx;
	}

	/* 地图图片 */
	.map-image {
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 10px !important;
		top: 0;
		left: 0;
	}

	/* 重叠卡片样式 */
	.overlap-card {
		position: absolute;
		top: 55%;
		left: 40rpx;
		right: 40rpx;
		z-index: 2;
	}

	/* 项目列表容器 */
	.vacancyList {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	/* 卡片内容布局 */
	.card-body-layout {
		height: 120rpx;
	}

	/* 行间距 */
	.row-gutter {
		margin-top: 10rpx;
		margin-bottom: 15rpx;
	}

	/* 第一个卡片特殊样式 */
	.first-card {
		margin-top: 10rpx;
	}

	/* 非第一个卡片特殊样式 */
	.common-card:not(.first-card) {
		margin-top: 20rpx;
	}

	.stat-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx 0;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
	}
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.stat-num {
		font-size: 36rpx;
		font-weight: bold;
		color: #2d8cf0;
	}
	.stat-label {
		font-size: 24rpx;
		color: #888;
	}
	.section-title {
		margin: 32rpx 20rpx 12rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	.recommend-scroll {
		white-space: nowrap;
		margin-bottom: 10rpx;
	}
	.recommend-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	.company-card {
		width: 220rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
		margin-right: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.company-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}
	.company-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}
	.company-desc {
		font-size: 22rpx;
		color: #888;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: center;
	}
	.resume-card {
		width: 220rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
		margin-right: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.resume-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}
	.resume-job {
		font-size: 24rpx;
		color: #2d8cf0;
		margin-bottom: 4rpx;
	}
	.resume-desc {
		font-size: 22rpx;
		color: #888;
	}
	.animate-title {
	  display: inline-block;
	  position: relative;
	  animation: scaleIn 0.6s ease-out forwards;
	  transform-origin: center;
	}
	.animate-text {
	  animation: fadeInUp 0.6s ease-out forwards;
	  opacity: 0;
	}
	@keyframes scaleIn {
	  0% {
	    transform: scale(0.8);
	    opacity: 0;
	  }
	  100% {
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	
	@keyframes fadeInUp {
	  0% {
	    transform: translateY(10px);
	    opacity: 0;
	  }
	  100% {
	    transform: translateY(0);
	    opacity: 1;
	  }
	}
	
	/* 为每个卡片添加延迟动画 */
	.company-card:nth-child(1) .animate-text {
	  animation-delay: 0.2s;
	}
	.company-card:nth-child(2) .animate-text {
	  animation-delay: 0.3s;
	}
	.company-card:nth-child(3) .animate-text {
	  animation-delay: 0.4s;
	}
</style>